import { ref, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import useLoading from '@/hooks/loading'

const initValue = {
  columns: [],
  data: [],
  pagination: {
    pageCount: 0,
    current: 1,
    pageSize: 10,
    total: 0,
  },
}

export default function useSearchTable({
  columns = initValue.columns,
  data = initValue.data,
  pagination = initValue.pagination,
  generateQuery,
  fetchTableData,
}) {
  const { loading, setLoading } = useLoading(false)
  const tableFilterForm = ref()
  const tableFilterRules = ref()

  const {
    resetFields: onTableFilterReset,
    validate: onTableFilterValidate,
    validateInfos: tableFilterValidateInfos,
  } = Form.useForm(tableFilterForm, tableFilterRules, {
    onValidate: (...args) => console.log(...args),
  })

  const onTableFilterSubmit = () => {
    onTableFilterValidate()
      .then(() => {
        tablePagination.current = 1
      })
      .then(() => fetchTableData())
      .catch((err) => {
        console.log('error', err)
      })
  }

  /****************************************
   *               表格主体                 *
   ****************************************/

  const table = reactive({
    // 表格列
    columns: columns,
    // 表格数据
    data: data,
  })

  /****************************************
   *              表格分页器                *
   ****************************************/
  const tablePagination = reactive(pagination)

  const onTablePaginationChange = (pagination, filters, sorter, { currentDataSource }) => {
    console.log(pagination)
    const { current } = pagination
    tablePagination.current = current
    fetchTableData()
  }

  return {
    // loading,
    // loadingText,
    // setLoading,
    // toggle,
  }
}
